<template>
  <div class="home-container" ref="homeImages" @wheel="handleWheel">
    <ul
      class="home-images"
      :style="{ transform: `translateY(${imageTranslateY}px)` }"
      @transitionend="transitionEnd"
    >
      <li v-for="item in homeImages" :key="item.id" class="list-img-container">
        <img :src="item.img" alt="" />
        <div>
          <span>{{ item.title }}</span>
          <p>{{ item.description }}</p>
        </div>
      </li>
    </ul>
    <ul class="Indicator">
      <li
        :class="{ active: imageIndex === i }"
        v-for="(item, i) in homeImages"
        :key="item.id"
      ></li>
    </ul>
    <div v-show="imageIndex > 0" class="icon up">
      <span @click="switchTo(imageIndex - 1)" class="iconfont icon-up"></span>
    </div>
    <div v-show="imageIndex < homeImages.length - 1" class="icon down">
      <span @click="switchTo(imageIndex + 1)" class="iconfont icon-down"></span>
    </div>
    <Header />
    <LoginForm />
  </div>
</template>

<script>
import homeImg1 from "../../assets/home1.jpg";
import homeImg2 from "../../assets/home2.jpg";
import homeImg3 from "../../assets/home3.jpg";

import Header from "./header";
import LoginForm from "./login-form";

export default {
  name: "Home",
  components: {
    Header,
    LoginForm
  },
  data() {
    return {
      imageIndex: 0, //当前图片是第几张
      homeImagesHeight: 0, //图片容器的高度
      switching: false, //图片是否正在滚动
      homeImages: [
        {
          id: "1",
          img: homeImg1,
          title: "无论生活的路上会遇到多少障碍",
          description: "都希望我们能竭尽所能地跑完这一程",
        },
        {
          id: "2",
          img: homeImg2,
          title: "生活难免遭受苦难",
          description: "雨过天晴终有阳光",
        },
        {
          id: "3",
          img: homeImg3,
          title: "不要当自己回首过去时",
          description: "除了蹉跎一无所有！",
        },
      ],
    };
  },
  methods: {
    //窗口改变，获取图片容器的真实高度
    homeImagesResize() {
      this.homeImagesHeight = this.$refs.homeImages.clientHeight;
    },
    // 切换图片
    switchTo(val) {
      this.imageIndex = val;
    },
    // 鼠标滚轮滚动事件
    handleWheel(e) {
      if (this.switching) return;
      if (e.deltaY >= 125) {
        // 向下
        if (this.imageIndex >= this.homeImages.length - 1) return;
        this.switching = true;
        this.switchTo(this.imageIndex + 1);
      } else if (e.deltaY <= -125) {
        // 向上
        if (this.imageIndex <= 0) return;
        this.switching = true;
        this.switchTo(this.imageIndex - 1);
      }
    },
    // 动画完成后的事件
    transitionEnd() {
      this.switching = false;
    },
  },
  computed: {
    // 图片容器移动的位置
    imageTranslateY() {
      return -this.imageIndex * this.homeImagesHeight;
    },
  },
  mounted() {
    //真实dom渲染之后
    this.homeImagesResize();
    //屏幕高度改变之后重新获取高度
    window.addEventListener("resize", this.homeImagesResize);
  },
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>>

